<template>
  <div class="new">
    <div class="new_list">
        <ul>
            <span>商品分类</span>
            <li v-for="item in items" :key ="item.id">
                <router-link :to="'/commodity/'+item.id">
                {{item.message}}
              </router-link>

              </li>                        
          </ul>
      </div>
  </div>
</template>
<script>
export default {
  name: 'list',
      data() {
      return {
        items: [
          { message: '品牌服装',id:'1' },
          { message: '护肤彩妆',id:'2' },
          { message: '鞋靴箱包',id:'3' },
          { message: '珠宝饰品',id:'4' },
          { message: '母婴用品',id:'5' },
          { message: '家电数码',id:'6' },
          { message: '日用百货',id:'7' },
          { message: '食品生鲜',id:'8' },
          { message: '酒水饮料',id:'9' },
          { message: '办公学习',id:'10' },
          { message: '本地服务',id:'11' },
          { message: '虚拟服务',id:'12' },
        ]
      }
  },
}
</script>
<style scoped lang="stylus">
.new{
  width: 1200px;
  height: 67px;
  margin: 0 auto;
  position: relative;
  top: -20px;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.72)
} 
.new_list {
  font-style 32px
  color #313131   
}
.new_list ul span {
  float left
  font-size 30px
  font-weight 550
  color #313131
  line-height 67px
  margin-right 9px
}
.new_list ul li {
    float: left;
    font-size: 18px;
    color: #000;
    line-height: 67px;
    margin: 0 -5px;
    cursor: pointer;
    width: 99px;
}  

.new_list ul li:hover {
  color #448aca
}

</style>